<template>
    <div>
        <quill-editor  ref="myQuillEditor" v-model="content" :options="editorOption" class="my-quill-editor"></quill-editor>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            content: '',
            editorOption: {
                // 占位配置
                placeholder: '请输入...',
                height: '300px',
                modules: {
                    // 配置工具栏
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                        ['blockquote', 'code-block'], // 引用  代码块
                        [{ header: 1 }, { header: 2 }], // 1、2 级标题
                        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                        [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                        [{ indent: '-1' }, { indent: '+1' }], // 缩进
                        [{ direction: 'rtl' }], // 文本方向
                        // [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                        // [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                        [{ align: [] }], // 添加居中按钮
                        ['clean'], // 清除文本格式
                        ['link', 'image', 'video'], // 链接、图片、视频
                        // [{ color: [] }], // 文字颜色按钮
                    ],
                    // 更改插入的图片大小
                    imageResize: {
                        displayStyles: {
                            backgroundColor: "black",
                            border: "none",
                            color: "white",
                        },
                        modules: ["Resize", "DisplaySize", "Toolbar"],
                    },
                }
            },
        }
    }

}
</script>
<style>
    /* 编辑器高度及背景色 */
    ::v-deep .ql-editor {
        min-height: 300px;
        background-color: #fff;
    }

 


</style> 